<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="导入系统楳板数据"
        width="800px"
    >
        <div class="import-file-page">
            <div class="import-title">
                <div class="import-button">
                    <el-button type="text">只能上传xlsx文件导入数据</el-button>
                </div>
                <div class="import-button">
                    <el-upload ref="upload" action="" :show-file-list="false" :auto-upload="false" accept="xlsx" :on-change="handleChange">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </div>
                <div class="import-button" style="float: right;">
                    <el-button type="primary" @click="exeTemplate">上传模板</el-button>
                </div>
                <div class="import-button" style="float: right;">
                    <el-button type="primary" @click="exeDownload">下载模板</el-button>
                </div>
            </div>
            <div  class="import-content">
                <template v-if="showResult==0">
                    <i class="el-icon-files el-files"></i>
                    <div class="import-message-files">当产没有上传文件导入数据</div>
                </template>
                <template v-else-if="showResult==1">
                    <i class="el-icon-loading el-loading"></i>
                    <div class="import-message-loading">导入文件进行中......</div>
                </template>
                <template v-else-if="showResult==2">
                    <i class="el-icon-success el-success"></i>
                    <div class="import-message">
                        <span>总数：{{form.total}}</span>
                        <span style="color: green;">成功：{{form.success}}</span>
                        <span style="color: red;">失败：{{form.error}}</span>
                    </div>
                    <div class="import-message-success">导入文件导入成功！</div>
                </template>
                <template v-else>
                    <i class="el-icon-error el-error"></i>
                    <div class="import-message">
                        <span>总数：{{form.total}}</span>
                        <span style="color: green;">成功：{{form.success}}</span>
                        <span style="color: red;">失败：{{form.error}}</span>
                    </div>
                    <div class="import-message-error">
                        <el-button type="text">导入文件未全部成功、生成错误信息文件</el-button>
                        <el-button type="text" @click="$common.downloadFile(form.fileId)">下载文件</el-button>
                    </div>
                </template>
            </div>
            <div class="import-button">
                <el-button type="primary" @click="resetForm">关闭</el-button>
            </div>
        </div>
        <upload-template :visible.sync="showTemplate" suffixes="xlsx" :file-code="fileCode" template-name="导入系统模板数据文件模板"></upload-template>
    </el-dialog>
</template>

<script>
import PageList from "@/components/grid/pageList.vue";
import UploadTemplate from "@/components/upload/uploadTemplate";

export default {
    name: "importFile",
    components: {UploadTemplate, PageList},
    props: {
        visible: Boolean,
        fileCode: String,
        importUrl: String,
    },
    data() {
        return {
            height: '500px',
            loading: false,
            showTemplate: false,
            showResult: 0,

            form: {
                fileId: '',
                fileCode: '',
                filePath: '',
                total: 0,
                success: 0,
                error: 0,
            },
            indexId: 1,
            fileSize: "5M",

            suffixes: '',
        }
    },
    methods: {
        handleChange(file) {
            this.loading = true;
            this.showResult = 1;
            let suffixes = "xlsx";
            let fileName = file.name;
            this.form.fileName = fileName;
            let idx = fileName.lastIndexOf(".");
            let ext = "";
            if (idx !== -1) {
                ext = fileName.substr(idx + 1).toLowerCase();
            }
            if (suffixes.indexOf(ext) < 0) {
                this.$message.error('选择文件类型不对，请选择' + suffixes + '的文件！');
                this.loading = false;
                return;
            }
            let formData = new FormData();
            formData.append("files", file.raw);
            this.$common.uploadFile(formData, this.importData);
        },
        importData(data){
            if (data.code == '1') {
                this.form.fileCode = this.fileCode;
                this.form.filePath = data.data[0].filePath;
                this.$axios.post(this.importUrl, this.form).then(res => {
                    this.form = res.data;
                    this.showResult = 2;
                    this.$message.success(res.message);
                }).catch(() => {
                    this.showResult = 3;
                }).finally(() => {
                    this.loading = false;
                });
            } else {
                this.$message.error(data.message);
            }
        },
        exeTemplate() {
            this.suffixes = "xlsx";
            this.showTemplate = true;
        },
        exeDownload() {
            this.$common.downloadFileSystem(this.fileCode);
        },
        resetForm() {
            this.form = [];
            this.$emit('change', null);
            this.$emit('update:visible', false);
        },
    }
}
</script>

<style lang="scss">
.import-file-page {

    .import-title {
        .import-button {
            width: auto;
            margin: 0 10px 0 0;
            float: left;
        }
    }

    .import-content {
        margin: 20px 0;
        text-align: center;
        min-height: 150px;
        max-height: 300px;

        .el-files {
            font-size: 80px;
            color: gainsboro;
            margin: 50px 0 10px 0;
        }

        .import-message-files {
            color: gainsboro;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }

        .el-loading {
            font-size: 80px;
            color: #cccccc;
            margin: 10px;
        }

        .import-message-loading {
            color: #8c939d;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }

        .el-success {
            width: 100%;
            color: cadetblue;
            font-size: 120px;
            margin: 10px;
        }

        .import-message-success{
            color: green;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
        }

        .import-message {
            span {
                height: 30px;
                line-height: 30px;
                padding-right: 20px;
            }
        }

        .el-error{
            width: 100%;
            color: red;
            font-size: 120px;
            margin: 10px;
        }

        .import-message-error {
            .el-button {
                margin: 10px;

                span {
                    font-size: 20px;
                }
            }
        }
    }

    .import-button {
        width: auto;
        float: right;

        .el-button {
            margin: 0 10px 0 0;

        }
    }
}
</style>